<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Filters</title>
  </head>
  <body>
    <!-- Blur -->
    <div class="blur-sm">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam vero laudantium quo libero provident. Sit quisquam
      quod aut maxime libero!
    </div>
    <hr />
    <div class="blur-md">
      <img src="../assets/img/img3.jpg" alt="" />
    </div>
    <hr />
    <!-- Brightness 亮度 -->
    <div class="flex justify-evenly flex-wrap">
      <img class="brightness-50 w-60" src="../assets/img/img4.jpg" alt="" />
      <img class="brightness-100 w-60" src="../assets/img/img4.jpg" alt="" />
      <img class="brightness-125 w-60" src="../assets/img/img4.jpg" alt="" />
      <img class="brightness-200 w-60" src="../assets/img/img4.jpg" alt="" />
    </div>
    <!-- Contrast 对比度-->
    <div class="flex flex-wrap justify-evenly">
      <img class="contrast-0 w-60" src="../assets/img/img5.jpg" alt="" />
      <img class="contrast-50 w-60" src="../assets/img/img5.jpg" alt="" />
      <img class="contrast-100 w-60" src="../assets/img/img5.jpg" alt="" />
      <img class="contrast-200 w-60" src="../assets/img/img5.jpg" alt="" />
    </div>
    <!-- Grayscale 去色-->
    <img class="grayscale" src="../assets/img/img4.jpg" alt="" />
    <!-- Invert 负片-->
    <img class="invert" src="../assets/img/img4.jpg" alt="" />
    <!-- Sepia -->
    <img class="sepia" src="../assets/img/img4.jpg" alt="" />
    <!-- Hue Rotate -->
    <div class="flex justify-evenly flex-wrap">
      <img class="hue-rotate-0 w-60" src="../assets/img/img5.jpg" alt="" />
      <img class="hue-rotate-30 w-60" src="../assets/img/img5.jpg" alt="" />
      <img class="hue-rotate-90 w-60" src="../assets/img/img5.jpg" alt="" />
      <img class="hue-rotate-180 w-60" src="../assets/img/img5.jpg" alt="" />
    </div>
  </body>
</html>

<!-- Blur
  blur-none	    filter: blur(0);
  blur-sm	      filter: blur(4px);
  blur	        filter: blur(8px);
  blur-md	      filter: blur(12px);
  blur-lg	      filter: blur(16px);
  blur-xl	      filter: blur(24px);
  blur-2xl	    filter: blur(40px);
  blur-3xl	    filter: blur(64px);
-->

<!-- Brightness
  brightness-0	    filter: brightness(0);
  brightness-50	    filter: brightness(.5);
  brightness-75	    filter: brightness(.75);
  brightness-90	    filter: brightness(.9);
  brightness-95	    filter: brightness(.95);
  brightness-100	  filter: brightness(1);
  brightness-105	  filter: brightness(1.05);
  brightness-110	  filter: brightness(1.1);
  brightness-125	  filter: brightness(1.25);
  brightness-150	  filter: brightness(1.5);
  brightness-200	  filter: brightness(2);
-->

<!-- Contrast
  contrast-0	  filter: contrast(0);
  contrast-50	  filter: contrast(.5);
  contrast-75	  filter: contrast(.75);
  contrast-100	filter: contrast(1);
  contrast-125	filter: contrast(1.25);
  contrast-150	filter: contrast(1.5);
  contrast-200	filter: contrast(2);
-->

<!-- Hue Rotate
  hue-rotate-0	    filter: hue-rotate(0deg);
  hue-rotate-15	    filter: hue-rotate(15deg);
  hue-rotate-30	    filter: hue-rotate(30deg);
  hue-rotate-60	    filter: hue-rotate(60deg);
  hue-rotate-90	    filter: hue-rotate(90deg);
  hue-rotate-180	  filter: hue-rotate(180deg);
-->
